<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <script src="./js/login.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="indextop">
        <!-- 大标题 -->
        <div class="logotit"></div>
        <ul>
            <li>竞赛</li>
            <li>社交</li>
            <li>服务</li>
        </ul>
    </div>

    <div class="header index">
        <img class="logo-l" src="./imgs/logo.png">
        <!-- 导航栏 -->
        <div class="topnav">
            <ul>
                <li class="on"><a href="index.html">首页</a></li>
                <li><a href="allCompete.html">竞赛汇总</a></li>
                <li><a href="joinTeam.html">组队</a></li>
                <li><a href="community.html">社区</a></li>
                <li><a href="jobs.html">实习求职</a></li>
                <li><a href="">优秀作品</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
    </div>

    <!-- 主体 -->
    <div class="mainb">
        <div class="container">
            <div style="display:flex;">
                <!-- 轮播 -->
                <div class="bann-wrap">
                    <!-- Swiper -->
                    <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
                        <div class="swiper-wrapper"
                            style="transform: translate3d(-7732px, 0px, 0px); transition-duration: 0ms;">
                            <div class="swiper-slide">
                                <a href="#"><img src="./imgs/bann1.jpg"></a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#"><img src="./imgs/bann2.jpg"></a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#"><img src="./imgs/bann3.jpg"></a>
                            </div>
                            <div class="swiper-slide swiper-slide-active">
                                <a href="#"><img src="./imgs/bann4.jpg"></a>
                            </div>
                        </div>

                        <!-- 圆点 -->
                        <div class="swiper-pagination"></div>
                        <!-- 箭头 -->
                        <!-- <div class="swiper-button-next swiper-button-disabled" tabindex="0" role="button" aria-label="Next slide" aria-disabled="true"></div> -->
                        <!-- <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div> -->
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                    </div>
                    <script src="./js/swiper.min.js"></script>
                    <script>
                        $(function () {
                            var swiper = new Swiper('.swiper-container', {
                                spaceBetween: 30,
                                centeredSlides: true,
                                autoplay: {
                                    delay: 4000,
                                    disableOnInteraction: false,
                                },
                                // 小圆点
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                            });
                        })
                    </script>
                </div>

                <!-- 右侧导航 -->
                <ul class="nav-right">
                    <li id="login_link"><a href="./login.html">注册/登陆</a></li>
                    <li><a href="#">竞赛推荐</a></li>
                    <li><a href="#">组队推荐</a></li>
                </ul>
            </div>
            <div class="game-about">
                <!-- 热门竞赛 -->
                <div class="game-type">
                    <div class="cm-modeltit">
                        <span>热门竞赛</span>
                    </div>
                    <div class="game-list">
                        <div class="game-item">
                            <div class="game-img">
                                <img src="./imgs/game1.jpg" alt="">
                            </div>
                            <div class="game-like">
                                <i></i>
                                <span>关注</span>
                            </div>
                        </div>

                        <div class="game-item">
                            <div class="game-img">
                                <img src="./imgs/game2.jpg" alt="">
                            </div>
                            <div class="game-like">
                                <i></i>
                                <span>关注</span>
                            </div>
                        </div>

                        <div class="game-item">
                            <div class="game-img">
                                <img src="./imgs/game3.jpg" alt="">
                            </div>
                            <div class="game-like">
                                <i></i>
                                <span>关注</span>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 赛事 -->
                <div class="game-news">
                    <div class="cm-modeltit">
                        <span>赛事</span>
                    </div>
                    <div class="news-list">
                        <div class="new-item">
                            <div class="date">
                                <p>19</p>
                                <span>4月</span>
                            </div>
                            <div class="tit-time">
                                <p>全国大学生英语竞赛</p>
                                <p>比赛时间：9：00 - 11：00 </p>
                            </div>
                        </div>
                        <div class="new-item">
                            <div class="date">
                                <p>19</p>
                                <span>4月</span>
                            </div>
                            <div class="tit-time">
                                <p>全国大学生英语竞赛</p>
                                <p>比赛时间：9：00 - 11：00 </p>
                            </div>
                        </div>
                        <div class="new-item">
                            <div class="date">
                                <p>19</p>
                                <span>4月</span>
                            </div>
                            <div class="tit-time">
                                <p>全国大学生英语竞赛</p>
                                <p>比赛时间：9：00 - 11：00 </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>